<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
   <link rel="stylesheet" href="{{ url_for('static',filename='CSS/1.css') }}">
</head>

<body>

</body>
<div id="box">
    <div class="box-head">
        <span class="h-span">小盗机器人</span>
    </div>
    <div class="box-body">
        <div class="rotWord">
            <span></span>
            <p>helo 好久不见！</p>
        </div>
    </div>
    <div class="box-footer">
        <input type="text" id="input" autocomplete="off">
        <div id="btn" onclick="action()">发送</div>
    </div>
</div>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
<script type="text/javascript">
        var text = $("#input");
        function action() {
            //判断输入文本框是否有值
            if (text.val() == "" || text.val == "") {
                alert("不能为空")
                text.focus();
                return;
            }
            $(".box-body").append(
                    "<div class='myWord'><span></span><p>" + text.val()
                            + "</p></div>");
            $(".box-body").scrollTop(1000000000000);
            $.ajax({
                type : "post",
                url:"send",
                data : {
　　　　　　　　　　　　　/*图灵机器人的apikey*/
                    txt:text.val()
                },
                success : function(data) {
                    var result=JSON.parse(data)
                    $(".box-body").append("<div class='rotWord'><span></span><p>" + result + "</p></div>");
                    $(".box-body").scrollTop(1000000000000);
                }
            });
            text.val("");
            text.focus();
        }
        //键盘回车事件
        $(document).keydown(function(event) {
            if (event.keyCode == 13) {
                action();
            }
        });
    </script>
</html>